<template>
  <view class="order-view" v-if="OrderId">
    <!-- 领取优惠券弹窗 -->
    <uni-popup ref="popup2" backgroundColor="#fff" v-if="CouponLts.length>0">
      <view class="popup-content-hd2">
        优惠
      </view>
      <view class="popup-content-bd2">
        <view class="popup-content-bd2-tip">
          当前商品享受如下优惠
        </view>
      </view>
      <!-- 可用优惠券 -->
      <view class="yhq-has">
        <view>
          <view class="yhq-bg" v-for="(item, index) in CouponLts" v-bind:class="{
                    all:
                      item.Type == 1 ||
                      (item.Type == 2 && item.Cfg_Package_id == 0),
                  }" v-bind:key="index">
            <view class="yhq_box_left">
              <view class="lottry">
                <view class="inlottry-bd">
                  <view class="name01" v-show="item.Param2 > 0">
                    <text class="icon_bg" v-if="item.Type == 2 || item.Type == 4">满减券</text>
                    <text class="icon_bg" v-if="item.Type == 1 || item.Type == 3">折扣券</text>
                    <view class="rd">
                      {{ item.Name }}
                    </view>

                  </view>
                  <view class="priceHd">
                    <view class="priceHd_price" v-if="item.Type == 2 || item.Type == 4">
                      <text>{{ `${item.Param1 / 100}` }}</text>
                      <text>￥</text>
                    </view>
                    <view class="priceHd_price" v-if="item.Type == 1 || item.Type == 3">
                      <text>{{ `${item.Param1 / 10}` }}</text>
                      <text>折</text>
                    </view>
                    <view class="priceHd-tip"> {{ `满${item.Param2 / 100}可用` }}</view>
                  </view>
                  <view class="name02" v-if="item.Type == 3 || item.Type == 4">
                    限品类
                  </view>

                  <view class="name02" v-if="item.Type == 1 || item.Type == 2">
                    全品类
                  </view>
                </view>
                <view class="inlottry-hd" @click="checkCoupon(item)">
                  选择优惠券
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 可用优惠券 -->
    </uni-popup>
    <!-- 领取优惠券弹窗 -->


    <!-- 通宝抵扣 -->
    <uni-popup ref="popup3" backgroundColor="#fff">
      <view class="popup-content-hd2">
        通宝抵扣
      </view>
      <view class="yd-bd" style="height:300rpx;">
        <text>可用余额：<text>{{Bill}}</text></text>
        <!--   <radio-group @change="chang2">
          <label>
            <radio :value="2" :checked="activeRadio2 === 2" />抵扣
          </label>
        </radio-group> -->
        <label class="radio">
          <radio value="2" :checked="activeRadio2" @click="chang2()" />
        </label>
      </view>
    </uni-popup>
    <!-- 通宝抵扣 -->

    <!-- 妖豆抵扣 -->
    <uni-popup ref="popup" backgroundColor="#fff">
      <view class="popup-content-hd2">
        妖豆抵扣
      </view>
      <view class="yd-bd" style="height:300rpx;">
        <text>可用余额：<text>{{Blend}}</text></text>
        <label class="radio">
          <radio value="1" :checked="activeRadio" @click="chang()" />
        </label>
      </view>
    </uni-popup>
    <!-- 妖豆抵扣 -->
    <view class="order-number-box">
      <view class="row">
        <text class="order-name">订单编号:</text><text class="order-value">{{OrderId}}</text>
      </view>
      <view class="row">
        <text class="order-name">发货账号:</text><text class="order-value2"> <text>{{useName}}</text>  <text style="font-weight: 500;font-size: 26rpx;">（支付前请务必确认道具发放账号）</text> </text>
      </view>
    </view>
    <image class="order-bg" src="https://img.5211game.com/Base/xiaochengxu/static/order-bg.png" mode=""></image>
    <view class="shop-detail-box">
      <view class="shop-title">
        商品详情
      </view>
      <view class="shop-detail-box-item" v-for="(item,index) in Order.Info" v-bind:key="index">
        <image v-bind:src="item.Goods_imgPath" mode=""></image>
        <view class="shop-detail-box-item-right">
          <view class="shop-number">
            x{{item.Goods_amount}}
          </view>
          <view class="shop-detail-name">
            {{item.Goods_disName}}<text>{{item.Goods_unit}}</text>
          </view>
          <view class="shop-detail-info">
            {{item.Goods_profile}}
          </view>
          <view class="shop-detail-price">
            ￥{{Number((item.Goods_cPrice/100)).toFixed(2)}}
          </view>
        </view>
      </view>
    </view>
    <view class="order-detail">
      <view class="order-row">
        <text>订单金额</text><text class="price" v-show="Order.TotalPrice">￥{{Number((TotalPrice/100)).toFixed(2)}}</text>
      </view>
      <view class="order-row" @click="CouponLqFn" v-if="CouponLts.length>0">
        <text>优惠券
          <text class="sale-kuang">已选推荐优惠</text>
        </text><text class="price">-￥{{Number((yhq_price/100)).toFixed(2)}}<text class="raw">></text></text>
      </view>
      <view class="order-row" @click="tbcheck" v-if="Bill>0">
        <text>通宝抵扣 </text><text class="price"> <text
            v-show="activeRadio2 ">-￥{{Number((Bill_kou/100)).toFixed(2)}}</text> <text class="raw">></text></text>
      </view>
      <view class="order-row" @click="ydcheck" v-if="Blend>0">
        <text>妖豆抵扣</text><text class="price"> <text
            v-show="activeRadio">-￥{{Number((Blend_kou/100)).toFixed(2)}}</text><text class="raw">></text></text>
      </view>
      <view class="all-price">
        <text>合计:<text class="price"> ￥{{real_pay_price}}</text></text>
      </view>
    </view>
    <view class="pay-shuoming">
        <view class="pay-shuoming-title">
          <text class="deng-icon"></text>
          重要提示
        </view>
        <view class="pay-info">
          支付前请确认道具发放账号，如小程序绑定账号与平台登录
          账号不一致，请先解绑当前账号并绑定新的平台账号后再购
          买。<text @click="gotoMy">去解绑/更换账号>></text>
        </view>
    </view>
    <view class="pay">
      <text class="all-price-num">￥{{real_pay_price}}</text>
      <text class="pay-btn" @click="payOrder">立即支付</text>
    </view>
  </view>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  import md5 from "js-md5"
  import myMixin from '../../mixins/base64.js'
  export default {
    data() {
      return {
        keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
        Order: '',
        Bill: 0, //通宝
        Bill_kou: 0, //通宝抵扣
        Blend: 0, //妖豆
        Blend_kou: 0, //妖豆抵扣
        CouponLts: [],
        check_coupon_id: 0,
        check_coupon_name: '请选择优惠券',
        activeRadio: false,
        activeRadio2: true,
        real_pay_price: '',
        yhq_price: 0,
        TotalPrice: '',
        OrderId: '',
        goodsInfo: '',
        orderLts: [],
        open_id: '',
        appid: 'wxb4feeebfce897ba8',
        useName:''

      };
    },
    mixins: [myMixin],
    onLoad(options) {
      this.open_id = uni.getStorageSync('oid');  
      let str = decodeURIComponent(options.goodsInfo)
      let count = options.count;
      let BegivenUid = options.BegivenUid
      if (str != "undefined") {
        this.goodsInfo = JSON.parse(str);
        console.log(this.goodsInfo, count);
        let carLts = [];
        console.log('BegivenUid', BegivenUid)
        if (BegivenUid) {
          var obj = new Object({
            I: this.goodsInfo.Goods_id,
            C: count,
            U: BegivenUid
          });
        } else {
          var obj = new Object({
            I: this.goodsInfo.Goods_id,
            C: count,
            U: 0
          });
        }

        carLts.push(obj);
        this.orderLts = carLts;
      } else {
        this.orderLts = this.dataCode;
      }
      if(uni.getStorageSync('userinfo')){
         this.useName= JSON.parse(uni.getStorageSync('userinfo')).userName;
      }     
      this.paymentrequest()
    },
    watch: {
      yhq_price: {
        handler(newName, oldName) {
          this.countPrice();
        },
        immediate: true
      },
    },
    computed: {
      ...mapGetters("m_cart", [
        "dataCode"
      ])
    },
    methods: {
      CouponLqFn() {
        this.$refs.popup2.open('bottom')
      },
      tbcheck() {
        this.$refs.popup3.open('bottom')
      },
      ydcheck() {
        this.$refs.popup.open('bottom')
      },
      gotoMy(){
        uni.switchTab({
          url: '/pages/my/my'
        })
      },
      chang() {
        this.activeRadio = !this.activeRadio;
        this.countPrice();
        this.$refs.popup.close()
      },
      chang2(e) {
        this.activeRadio2 = !this.activeRadio2;
        this.countPrice();
        this.$refs.popup3.close()
      },
      checkCoupon(item) {
        this.check_coupon_id = item.Id;
        console.log('this.check_coupon_id', this.check_coupon_id)
        this.yhq_price = item.Value;
        this.$refs.popup2.close();
      },
      async paymentrequest() {
        if (this.orderLts.length > 0) {
          const uid = JSON.parse(uni.getStorageSync('userinfo')).userId;
          const dataCodeString = JSON.stringify(this.orderLts);

          const signMd5 = md5(
            `AppType=0&Bid=65&info=${this.encode(dataCodeString)}&UserId=${uid}&key=C63A39419CE64F258ADFE3FAF5E63477`
            );
          console.log('kk', this.encode(dataCodeString))
          console.log('yy',
            `Bid=65&info=${this.encode(dataCodeString)}&UserId=${uid}&key=C63A39419CE64F258ADFE3FAF5E63477`)
          const result = await uni.$http.get(
            `/WebApi/Wap/Action?t=paymentrequest&data=${JSON.stringify({Bid:65,UserId:uid,AppType:0,Sign:signMd5,info:this.encode(dataCodeString)})}`
          )
          const {
            data: res
          } = result;
          console.log(res)
          if (res.data && res.data.Info) {
            this.PayData(res.data.Info)
          } else {
            uni.showModal({
              title: res.msg,
              duration: 2000,
              showCancel: false, //没有取消按钮的弹框
              buttonText: '确定',
              success: (res) => {
                if (res.confirm) {
                  uni.switchTab({
                    url: '/pages/home/home'
                  })
                } else {
                  uni.switchTab({
                    url: '/pages/home/home'
                  })
                }
              }
            });

          }

        } else {
          uni.showModal({
            title: '订单异常请选择商品支付!',
            showCancel: false, //没有取消按钮的弹框
            buttonText: '确定',
            duration: 2000,
            success: (res) => {
              if (res.confirm) {
                uni.switchTab({
                  url: '/pages/home/home'
                })
              } else {
                uni.switchTab({
                  url: '/pages/home/home'
                })
              }
            }
          });

        }
      },
      async PayData(val) {
        const uid = JSON.parse(uni.getStorageSync('userinfo')).userId;
        const signMd5 = md5(`Bid=65&data=${val}&UserId=${uid}&key=C63A39419CE64F258ADFE3FAF5E63477`);
        const result = await uni.$http.get(
          `/WebApi/Wap/Action?t=PayData&data=${JSON.stringify({Bid:65,UserId:uid,Sign:signMd5,data:val})}`
        )
        console.log('121', result)
        const {
          data: res
        } = result;
        console.log(res)
        if (res.code == 0) {
          this.Bill = res.data.Bill;
          this.Blend = res.data.Blend;
          this.CouponLts = res.data.Coupon;
          this.OrderId = res.data.Order.OrderId;
          this.Order = res.data.Order;
          this.TotalPrice = res.data.Order.TotalPrice
          if (res.data.Coupon.length > 0) {
            //查询优惠券抵扣最大金额的优惠券id
            let max = res.data.Coupon[0]
            res.data.Coupon.forEach(item => max = item.Value > max.Value ? item : max);
            this.check_coupon_id = max.Id;
            this.yhq_price = max.Value;
          }
          console.log('this.check_coupon_id', this.check_coupon_id)
          this.countPrice();

        }
      },
      //通报优惠券价格计算
      countPrice() {
        const limit_price = this.TotalPrice - this.yhq_price;
        if (limit_price >= 0) {
          if (this.activeRadio2) {
            if (this.Bill - limit_price >= 0) {
              this.Bill_kou = limit_price;
              this.Blend_kou = 0;
              this.real_pay_price = '0.00'
              return false;
            } else {
              const limit_price2 = this.TotalPrice - this.yhq_price - this.Bill;
              if (limit_price2 >= 0) {
                this.Bill_kou = this.Bill;
                if (this.activeRadio) {
                  if (this.Blend - limit_price2 > 0) {
                    this.Blend_kou = limit_price2;
                    this.real_pay_price = '0.00'
                  } else {
                    this.Blend_kou = this.Blend;
                    this.real_pay_price = (Number(this.TotalPrice - this.yhq_price - this.Bill - this.Blend) / 100)
                      .toFixed(
                        2)
                  }
                } else {
                  this.real_pay_price = (Number(this.TotalPrice - this.yhq_price - this.Bill) / 100).toFixed(
                    2)
                }

              }
            }
          } else if (!this.activeRadio2 && this.activeRadio) {
            this.Bill_kou = 0;
            const limit_price2 = this.TotalPrice - this.yhq_price;
            if (this.Blend - limit_price2 >= 0) {
              this.Blend_kou = limit_price2;
              this.real_pay_price = '0.00'
            } else {
              this.Blend_kou = this.Blend;
              this.real_pay_price = (Number(this.TotalPrice - this.yhq_price - this.Blend) / 100)
                .toFixed(
                  2)
            }
          } else if (!this.activeRadio2 && !this.activeRadio) {
            this.Bill_kou = 0;
            const limit_price2 = this.TotalPrice - this.yhq_price;
            this.real_pay_price = (Number(this.TotalPrice - this.yhq_price) / 100)
              .toFixed(
                2)
          }

        } else {
          this.real_pay_price = '0.00'
        }
      },
      //微信支付
      async payOrder() {
        const uid = JSON.parse(uni.getStorageSync('userinfo')).userId;
        const signMd5 = md5(
          `appId=${this.appid}&Bid=65&bill=${this.Bill_kou}&blend=${this.Blend_kou}&couponId=${this.check_coupon_id}&openId=${this.open_id}&orderId=${this.OrderId}&UserId=${uid}&key=C63A39419CE64F258ADFE3FAF5E63477`
        );
        const result = await uni.$http.get(
          `/WebApi/Wap/Action?t=paymentsubmit&data=${JSON.stringify({Bid:65,UserId:uid,Sign:signMd5,bill:this.Bill_kou,blend:this.Blend_kou,couponId:this.check_coupon_id,openId:this.open_id,orderId:this.OrderId,appId:this.appid})}`
        )
        const {
          data: res
        } = result;

        console.log('微信支付', res)
        if (res.code == 0) {
          if (res.data.Result == 0) {
            uni.showModal({
              title: '订单支付成功!',
              showCancel: false, //没有取消按钮的弹框
              buttonText: '确定',
              duration: 2000,
              success: (res) => {
                if (res.confirm) {
                  uni.switchTab({
                    url: '/pages/cart/cart'
                  })
                } else {
                  uni.switchTab({
                    url: '/pages/cart/cart'
                  })
                }
              }
            });
          } else if (res.data && res.data.Result == 1) {
            let orderInfo = {
              "timeStamp": res.data.Params.timeStamp,
              "nonceStr": res.data.Params.nonceStr,
              "package": res.data.Params.package,
              "signType": 'MD5',
              "paySign": res.data.Params.paySign
            }
            uni.requestPayment({
              ...orderInfo,
              success(res) {
                console.log('开启微信支付', res)
                uni.showModal({
                  title: '支付完成!',
                  showCancel: false, //没有取消按钮的弹框
                  buttonText: '确定',
                  duration: 2000,
                  success: (res) => {
                    if (res.confirm) {
                      uni.switchTab({
                        url: '/pages/cart/cart'
                      })
                    } else {
                      uni.switchTab({
                        url: '/pages/cart/cart'
                      })
                    }
                  }
                });

              },
              fail(e) {
                console.log(e)
                uni.showModal({
                  title: '订单支付异常!',
                  showCancel: false, //没有取消按钮的弹框
                  buttonText: '确定',
                  duration: 2000,
                  success: (res) => {
                    if (res.confirm) {
                      uni.switchTab({
                        url: '/pages/cart/cart'
                      })
                    } else {
                      uni.switchTab({
                        url: '/pages/cart/cart'
                      })
                    }
                  }
                });
              }
            })
          } else {
            uni.showModal({
              title: res.msg,
              showCancel: false, //没有取消按钮的弹框
              buttonText: '确定',
              duration: 2000,
              success: (res) => {
                if (res.confirm) {
                  uni.switchTab({
                    url: '/pages/cart/cart'
                  })
                } else {
                  uni.switchTab({
                    url: '/pages/cart/cart'
                  })
                }
              }
            });

          }

        } else {
          uni.showModal({
            title: '订单支付失败!',
            showCancel: false, //没有取消按钮的弹框
            buttonText: '确定',
            duration: 2000,
            success: (res) => {
              if (res.confirm) {
                uni.switchTab({
                  url: '/pages/cart/cart'
                })
              } else {
                uni.switchTab({
                  url: '/pages/cart/cart'
                })
              }
            }
          });
        }

      }
    }
  }
</script>

<style lang="scss">
  .order-view {
    width: 100%;
    padding-bottom: 98rpx;

    .pay {
      width: 730rpx;
      height: 98rpx;
      background: #FFFFFF;
      position: fixed;
      bottom: 50rpx;
      display: flex;
      justify-content: space-between;
      padding-left: 20rpx;

      .all-price-num {
        font-size: 38rpx;
        height: 98rpx;
        line-height: 98rpx;
        font-family: PingFang SC;
        font-weight: 800;
        color: #E33F2A;
      }

      .pay-btn {
        width: 294rpx;
        height: 98rpx;
        line-height: 98rpx;
        text-align: center;
        background: #FFA000;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
      }
    }

    .order-bg {
      width: 750rpx;
      height: 7rpx;
      display: block;
      margin-bottom: 20rpx;
    }

    .order-number-box {
      width: 690rpx;
      padding: 30rpx 20rpx;
      background: #FFFFFF;
      border-radius: 0px 0px 12rpx 12rpx;
      display: flex;
      flex-direction: column;
      justify-content:flex-start;
      .row{
        margin-bottom:20rpx;
        .order-name {
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #1A1A1A;
        }
        
        .order-value {
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666;
          margin-left: 20rpx;
        }
        .order-value2{
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 800;
          font-size: 28rpx;
          color: #CD000C;
           margin-left: 20rpx;
        }
      }
   
    }

    .shop-detail-box {
      width: 680rpx;
      margin: 0 auto;
      overflow: hidden;
      zoom: 1;
      padding: 28rpx 20rpx;
      background: #FFFFFF;
      border-radius: 8px;
      margin-bottom: 20rpx;

      .shop-title {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #1A1A1A;
        margin-bottom: 20rpx;
      }

      .shop-detail-box-item {
        width: 100%;
        height: 172rpx;
        display: flex;
        justify-content: flex-start;
        margin-bottom: 20rpx;

        image {
          width: 172rpx;
          height: 172rpx;
        }

        .shop-detail-box-item-right {
          width: 482rpx;
          height: 172rpx;
          padding-left: 20rpx;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: space-between;
          position: relative;

          .shop-number {
            position: absolute;
            top: 76rpx;
            right: 30rpx;
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #808080;
          }

          .shop-detail-name {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #1A1A1A;

            text {
              font-size: 20rpx;
              font-family: PingFang SC;
              font-weight: 500;
              color: #000000;
            }
          }

          .shop-detail-info {
            width: 400rpx;
            font-size: 22rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
          }

          .shop-detail-price {
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 800;
            color: #E33F2A;
          }
        }
      }
    }

    .order-detail {
      width: 680rpx;
      margin: 0 auto;
      min-height: 383rpx;
      background: #FFFFFF;
      border-radius: 8rpx;
      padding: 38rpx 20rpx;
      margin-bottom: 20rpx;
      .order-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 46rpx;

        text {
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #1A1A1A;

          .sale-kuang {
            width: 118rpx;
            height: 26rpx;
            line-height: 26rpx;
            text-align: center;
            border: 1rpx solid #E33F2A;
            border-radius: 4rpx;
            font-size: 18rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #E33F2A;
            margin-left: 10rpx;
          }
        }

        .price {
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #E33F2A;

          .raw {
            color: #999999;
          }
        }
      }
    }
    .pay-shuoming{
      width: 720rpx;
      height: 200rpx;
      background: radial-gradient( 20% 0% at 0% 0%, #FFCFCC 0%, #FFF1F0 100%);
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      border: 2rpx solid #FFFFFF;
      margin:0 auto;
      padding-top: 20rpx;
      .pay-shuoming-title{
        width: 180rpx;
        height: 54rpx;
        margin:0 auto;
        background: #FFFFFF;
        border-radius: 26rpx 26rpx 26rpx 26rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 800;
        font-size: 22rpx;
        color: #E33F2A;
        margin-bottom: 20rpx;
         animation: breath 2s linear infinite;
        .deng-icon{
          width:33rpx;
          height: 31rpx;
          background:url('https://img.5211game.com/Base/xiaochengxu/static/deng.png');
          background-size: cover;
        }
      }
      @keyframes breath {
          0%,
          100% {
              transform: scale(1);
          }
          50% {
              transform: scale(0.9);
          }
      }
      .pay-info{
        width:648rpx;
        margin:0 auto;
        line-height: 35rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #1A1A1A;
        text{
          color: #E33F2A;
        }
      }
    }

    .all-price {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #1A1A1A;

      .price {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #E33F2A;
      }
    }
  }

  // 优惠券样式

  .popup-content-hd2 {
    width: 100%;
    height: 98rpx;
    line-height: 98rpx;
    background-color: #FFFFFF;
    border-radius: 20rpx 20rpx 0 0;
    border-bottom: 2rpx solid #EFEFEF;
    text-align: center;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #1A1A1A;
  }

  .popup-content-bd2 {
    width: 100%;
    overflow: hidden;
    zoom: 1;
    background-color: #FFFFFF;
  }

  .popup-content-bd2-tip {
    width: 657rpx;
    margin: 0 auto;
    height: 120rpx;
    line-height: 120rpx;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #1A1A1A;
  }

  .yd-bd {
    width: 657rpx;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #1A1A1A;
    margin-top: 20rpx;

    radio {
      margin-right: 10rpx;
    }
  }

  .yhq-has {
    width: 100%;

    .yhq-bg {
      width: 648.5rpx;
      height: 163rpx;
      margin: 0 auto;
      padding: 20rpx 0rpx 20rpx 33rpx;
      margin-bottom: 40rpx;
      background-image: url(https://img.5211game.com/Base/xiaochengxu/static/yhq.png);
      background-size: contain;

      .lottry {
        width: 657rpx;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        position: relative;

        .tmtc {
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 500;
          position: absolute;
          top: 0rpx;
          right: 220rpx;
          color: #EA586D;
        }


        .inlottry-bd {

          .priceHd {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;

            .priceHd-tip {
              margin-left: 10rpx;
              font-size: 22rpx;
              font-family: PingFang SC;
              font-weight: 500;
              color: #E9445A;
            }

            .priceHd_price {
              text-align: center;
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              font-size: 40rpx;
              font-family: PingFang SC;
              font-weight: 800;
              color: #E9445A;
            }
          }

          width: 72%;
          height: 163rpx;
          display: flex;
          flex-direction: column;

          .rd {
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666;
            margin: 6rpx 0;
          }

          .name01 {
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .icon_bg {
              width: 87rpx;
              height: 28rpx;
              line-height: 28rpx;
              text-align: center;
              background: #FFEBF0;
              border: 1rpx solid #ED7E90;
              border-radius: 4rpx;
              font-size: 20rpx;
              font-family: PingFang SC;
              font-weight: 500;
              color: #EA586D;
              margin-right: 10rpx;
            }
          }

          .name02 {
            font-size: 22rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
            margin: 2rpx 0;
          }

          .priceCenter {
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
          }
        }

        .inlottry-hd {
          width: 26%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #E9445A;
        }
      }
    }

  }
</style>